<template>
   <div id="page-screen" class="page-screen h-full flex flex-col overflow-hidden" style="background-color:#030B20;" :style="{zoom: pageZoomRate}">

    <div class="flex-1 h-0 p-3 flex flex-col">
      <div style="flex:3;">
        <el-row :gutter="20" class="h-full">
          <el-col :span="16" class="relative flex h-full">
            <div class="w-full h-full relative">
              <img src="../../assets/screen/map.png" class="absolute top-0 right-0 bottom-0 left-0 rounded-lg" :draggable="false" />
            </div>
          </el-col>
          <el-col :span="8" class="relative flex flex-col h-full">
            <div class="common-card">
              <div class="flex items-center py-2">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(7).png" />
                <span class="common-card-title">设备状态</span>
              </div>
              <div class="flex px-2">
                <div class="flex-1 py-4 text-center transparent-card-v3">
                  <div style="color:#58DBFF;font-size:30px;">20/25</div>
                  <div class="text-white text-sm">采集网关</div>
                </div>
                <div class="flex-1 py-4 text-center transparent-card-v3 ml-2">
                  <div style="color:#58DBFF;font-size:30px;">20/20</div>
                  <div class="text-white text-sm">设备总数</div>
                </div>
              </div>
            </div>

            <div class="common-card mt-4">
              <div class="flex items-center py-2">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(1).png" />
                <span class="common-card-title">用电分析</span>
              </div>
              <div id="yong_dian_fen_xi_chart" style="height:300px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="flex:2;" class="mt-4">
        <el-row :gutter="20" class="h-full">
          <el-col :span="8" class="relative flex h-full">
            <div class="common-card w-full">
              <!-- <div class="flex items-center">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(8).png" />
                <span class="common-card-title">水电分析</span>
              </div> -->
              <div class="flex px-6 flex-col mt-8">
                <div class="flex-1 px-1 transparent-card-v4 flex items-center">
                  <img src="../../assets/screen/icon-tunder.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>用电 (万度)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">0.98</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">21.68</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">240.60</span>
                    </div>
                  </div>
                </div>
                <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-4">
                  <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>自来水 (万吨)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">1.36</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">26.50</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">198.68</span>
                    </div>
                  </div>
                </div>
                <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-4">
                  <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>自来水 (万吨)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">0.26</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">8.24</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">36.8</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="relative flex h-full">
            <div class="common-card w-full">
              <!-- <div class="flex items-center">
                <img class="common-card-icon" src="../../assets/screen/icon@2x(8).png" />
                <span class="common-card-title">水电分析</span>
              </div> -->
              <div class="flex px-6 flex-col mt-8">
                <div class="flex-1 px-1 transparent-card-v4 flex items-center">
                  <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>低浓水 (万度)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">0.98</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">21.68</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">240.60</span>
                    </div>
                  </div>
                </div>
                <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-4">
                  <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>高浓水 (万吨)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">1.36</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">26.50</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">198.68</span>
                    </div>
                  </div>
                </div>
                <div class="flex-1 px-1 transparent-card-v4 flex items-center mt-4">
                  <img src="../../assets/screen/icon-water.png" class="w-12 h-15 mx-2 my-1" />
                  <div class="flex-1 text-sm text-white">
                    <div>蒸汽 (万吨)</div>
                    <div class="flex">
                      <span class="flex-2">本日</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">0.26</span>
                      <span class="flex-2">本月</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">8.24</span>
                      <span class="flex-2">本年</span>
                      <span style="color:#58DBFF;" class="flex-3 font-bold">36.8</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="relative flex h-full">
            <dv-border-box-8 class="p-4 pb-5" :dur="6">
              <dv-decoration-7 style="height:30px;">
                <div class="text-white px-2">告警信息</div>
              </dv-decoration-7>
              <div class="mt-4 flex flex-col">
                <dv-scroll-board :config="meterWarning" style="height:200px" />
              </div>
            </dv-border-box-8>
          </el-col>
        </el-row>
      </div>
    </div>
   </div>
</template>

<script>
  import Charts from '@jiaminghi/charts'
  import dataV from '@jiaminghi/data-view'
  import Vue from 'vue'
  Vue.use(dataV)

  export default {
    data() {
      return {
        windowWidth: window.innerWidth,
        scaleRate: 1,
        pageZoomRate: 1,
        meterWarning: {
          data: [
            ['用水量告警', '121'],
            ['产生废水告警', '21'],
            ['用电告警', '32'],
            ['用水量告警', '121'],
            ['产生废水告警', '21'],
            ['用电告警', '32'],
            ['用水量告警', '121'],
            ['产生废水告警', '21'],
            ['用电告警', '32'],
          ]
        }
      }
    },
    watch: {
      windowWidth: {
        handler(newVal) {
          // console.log(newVal)
          const scaleRate = newVal / 1920
          this.scaleRate = scaleRate > 1 ? 1 : scaleRate
          // 获取本页面的比例
          const pageScreen = document.querySelector('#page-screen')
          const x = pageScreen.offsetWidth / 1400
          const y = pageScreen.offsetHeight / 950
          this.pageZoomRate = Math.min(x, y)
        },
        immediate: true,
      },
    },
    created() {
      window.onresize = () => {
        this.windowWidth = window.innerWidth
      }
      this.drawPie()
    },
    methods: {
      drawPie() {
      	const chart2 = new Charts(document.querySelector('#yong_dian_fen_xi_chart'))
      	chart2.setOption({
      		series: [
      			{
      				type: 'pie',
      				roseType: true,
      				data: [
                { name: '空调用电', value: 15 },
                { name: '照明用电', value: 20 },
                { name: '动力用电', value: 15 },
                { name: '特殊用电', value: 25 },
                { name: '其他', value: 25 }
              ],
      				radius: ['50%', '80%'],
      				insideLabel: {
      					show: false,
      				},
      				outsideLabel: {
      					show: true,
      					labelLineEndLength: 5,
                fontSize: 15
      				},
              label: {
                fontSize: 15
              },
      			}
      		]
      	})
      },
    },
  }
</script>

<style lang="scss">
  .page-screen {
    min-width: 1400px;
    min-height: 950px;
    // aspect-ratio: 1400 / 950;

    .common-card-image {
      background-image: url(../../assets/screen/box-bg@2x-2.png);
      background-size: 100% 100%;
      padding: 20px;
    }

    .common-card {
      background-image: url(../../assets/screen/panel-bg@2x.png);
      background-size: 100% 100%;
      padding-bottom: 20px;

      &-icon {
        width: 90px;
        height: 80px;
        margin-left: -10px;
      }

      &-title {
        color: #AADDFF;
        font-size: 21px;
        margin-left: -10px;
      }
    }

    .transparent-card {
      background-image: url(../../assets/screen/icon-333.png);
      background-size: 100% 100%;
    }

    .transparent-card-v2 {
      background-image: url(../../assets/screen/box-bg@2x.png);
      background-size: 100% 100%;
    }

    .transparent-card-v3 {
      background-image: url(../../assets/screen/box-bg@2x-1.png);
      background-size: 100% 100%;
    }

    .transparent-card-v4 {
      background-image: url(../../assets/screen/box-bg@2x-2.png);
      background-size: 100% 100%;
    }
  }
</style>
